@font-face {
	font-family: 'iconfont';
	/* IE9 */
	src: url('../fonts/icons/iconfont.eot');
	/* IE6-IE8 */
	src: url('../fonts/icons/iconfont.eot?#iefix') format('embedded-opentype'),
	/* chrome, firefox */
	url('../fonts/icons/iconfont.woff') format('woff'),
	/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	url('../fonts/icons/iconfont.ttf') format('truetype'),
	/* iOS 4.1- */
	url('../fonts/icons/iconfont.svg#iconfont') format('svg');
}

*{
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;

	background: #222222;
}
.content {
	width: 100%;
	height: 100%;
}

/* stage -- start */
.stage{
	position: relative;

	width: 100%;
	height: 100%;
}
/* stage -- end */

/* image -- start */
.img-sec {
	padding: relative;

	width: 100%;
	height: 100%;
	overflow: hidden;

	background: #dddddd;

	perspective: 1800px;

	@at-root {
		.img-figure {
			position: absolute;

			width: 320px;
			height: 360px;
			padding: 40px;

			background: #ffffff;

			box-sizing: border-box;
			cursor: pointer;
			transform-origin: 0 50% 0;
			transform-style: preserve-3d;
			transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

			&.is-inverse {
				transform: translate(320px) rotateY(180deg);
			}
		}
		figcaption {
			text-align: center;

			.img-title {
				margin: 20px 0 0 0;

				color: #a7a0a2;
				font-size: 16px;
			}

			.img-back{
				position: absolute;
				left: 0;
				top: 0;

				width: 100%;
				height: 100%;
				padding: 50px 40px;
				overflow: auto;

				color: #a7a0a2;
				font-size: 22px;
				line-height: 1.25;
				text-align: left;

				background: #ffffff;

				box-sizing: border-box;
				// translateZ(1px) 为了解决Safari的bug
				transform: rotateY(180deg) translateZ(1px);
				backface-visibility: hidden;
			}
		}
	}
}
/* image -- end */

/* controller -- start */
.controller-nav {
	position: absolute;
	left: 0;
	bottom: 30px;
	z-index: 101;

	width: 100%;

	text-align: center;

	@at-root {
		.controller-unit {
			display: inline-block;
			margin: 0 5px;
			width: 30px;
			height: 30px;
			
			text-align: center;
			vertical-align: middle;

			cursor: pointer;
			background: #aaaaaa;
			border-radius: 50%;

			transform: scale(.5);
			transition: transform .6s ease-in-out, background-color .3s;

			&.is-center {
				background: #888888;

				transform: scale(1);

				&::after {
					color: #ffffff;
					font-size: 18px;
					font-family: 'iconfont';
					line-height: 30px;

					content: '\e699';

					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}

				&.is-inverse {
					background: #555555;

					transform: rotateY(180deg);
				}
			}
		}
	}
}
/* controller -- end */